<template>
    <div class="line_box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,watchEffect,defineEmits } from "vue";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['dialogData'])
// 字体自适应方法
const pxToRem = (px: number) => {
  const scale = document.documentElement.clientWidth / 1920;
  return Math.round(px * Math.min(scale, 3));
};
// echarts初始化渲染
let legendData = props.housingSupplyStatsData.legendData;
let xAxisData = props.housingSupplyStatsData.xAxisData;
let yAxisData = props.housingSupplyStatsData.yAxisData;
let seriesData = props.housingSupplyStatsData.seriesData;
let colors = props.housingSupplyStatsData.colors;
let typeData = props.housingSupplyStatsData.typeData;

const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "line",
          lineStyle: {
            color: "rgba(40,252,255,0.6)",
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.9)",
          },
        },
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(15),
        },
        backgroundColor: "rgba(8, 64, 132, 0.9)",
      },
      legend: {
        icon:'roundRect',
        // 设置图例的布局方向为垂直
        orient: 'vertical',//horizontal水平显示
        right: pxToRem(0),
        top: pxToRem(3),
        itemWidth: pxToRem(30),
        itemHeight: pxToRem(10),
        itemGap: pxToRem(2),
        borderRadius: pxToRem(100), // 设置圆角的半径大小
        itemStyle: {
            borderRadius: pxToRem(100), // 设置圆角的半径大小
        },
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(12),
          rich: {},
          padding: [0, 0, pxToRem(-3), 0],
        },
        data: legendData,
      },
      grid: {
        left: "10%",
        right: "5%",
        bottom: "7%",
        top: "40%",
        containLabel: true,
      },
      xAxis: {
        boundaryGap: true,
        data: xAxisData,
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#FFFFFF",
            fontSize: pxToRem(12),
          },
        },
      },
      yAxis: yAxisData.map((item: any) => ({
        type: "value",
        name: item,

        nameTextStyle: {
          color: "#959699",
          fontSize: pxToRem(12),
          
        },
        
        splitLine: {
          show: item == "新增住房贷款" ? false : true,
          lineStyle: {
            color: "#31679C",
            type: "dashed",
          },
        },
        axisLabel: {
          formatter: "{value}",
          color: "#959699",
          fontSize: pxToRem(12),
        },
      })),
      series: seriesData.map((data: any, index: string | number) => ({
        name: legendData[index],
        type: typeData[index],
        symbol: "none",
        smooth: true,
        yAxisIndex: typeData[index] == "line" ? 1 : 0,
        data: data,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [
              {
                offset: 0,
                color: colors[index].a,
              },
              {
                offset: 1,
                color: colors[index].b,
              },
            ],
          },
          borderRadius: [pxToRem(25), pxToRem(25),pxToRem(25), pxToRem(25)] // 柱状图圆角（顺时针左上，右上，右下，左下）
        },
      })),
    };
    myChart.value.setOption(option);
    myChart.value.getZr().on("click", (params) => {
        emit('dialogData',option)
    });
  }
};
const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  legendData = props.housingSupplyStatsData.legendData;
  xAxisData = props.housingSupplyStatsData.xAxisData;
  yAxisData = props.housingSupplyStatsData.yAxisData;
  seriesData = props.housingSupplyStatsData.seriesData;
  colors = props.housingSupplyStatsData.colors;
  typeData = props.housingSupplyStatsData.typeData;
  getEchart();
};

watchEffect(() => {
  updateChart();
});
onMounted(() => {
  
  getEchart();
  window.addEventListener("resize", () => {
    if (myChart.value) {
      myChart.value.dispose(); // 销毁旧图表实例
    }
    getEchart(); // 创建新的图表实例
  });
});

onUnmounted(() => {
  window.removeEventListener("resize", () => {
    if (myChart.value) {
      myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
    }
  });
});
</script>

<style scoped lang="less">

</style>
